<template>
    <div>
        <el-alert v-if="title" :title="title" type="success" effect="dark" :closable="false"></el-alert>
        <el-button @click="open">打开</el-button>
        <h2>父组件代码</h2>
        <div class="markdown-body">
            <CodeTpl></CodeTpl>
        </div>
        <h2>子组件代码</h2>
        <div class="markdown-body">
            <TestCodeTpl></TestCodeTpl>
        </div>
    </div>
</template>

<script>
import CodeTpl from '@/views/md/dialog.md'
import TestCodeTpl from '@/views/md/dialog-component.md'
import TestComponent from './test-component.vue'

export default {
    components: {
        CodeTpl,
        TestCodeTpl
    },
    data() {
        return {
            title: ''
        }
    },
    methods: {
        open() {
            this.$dialog.create(TestComponent, {
                props: {
                    name: '我是传入的props'
                },
                on: {
                    'on-message': (msg) => {
                        this.title = msg
                    }
                }
            }, {
                title: '新增会员',
                width: '600px',
                voFooter: true,
                voOnOk(dialog) {
                    console.log(dialog);
                    return new Promise((resolve, reject) => {
                        setTimeout(() => {
                            resolve(true)
                        }, 2000)
                    })
                }
            }, this).then(res => {
                console.log('响应', res);
            })
        }
    }
}
</script>

<style>

</style>
